<template>
  <div>
    <el-form-item label="经纬度:" prop="latLng">
      <el-input v-model="resultLatLng" disabled placeholder="请选择经纬度">
        <template slot="append">
          <el-button @click="showMap()"><i class="el-icon-s-promotion" /></el-button>
        </template>
      </el-input>
    </el-form-item>
    <model-dialog title="地图选择器" :visible.sync="dialogVisible" width="800px" @close="dialogVisible=!dialogVisible">
      <div class="flex-main">
        <div style="height: 70px;line-height:70px">
          搜索定位:&nbsp;
          <el-input
            id="tipInput"
            v-model="searchInfo.position"
            placeholder="搜索定位"
            style="width: 200px;"
            class="filter-item" />
          当前经纬度:&nbsp;

          <el-input
            v-model="searchInfo.latLng"
            :disabled="true"
            placeholder="当前经纬度"
            style="width: 230px;"
            class="filter-item" />&nbsp;&nbsp;
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
        <div class="flex-row">
          <div style="width: 200px;margin-right: 10px;">
            <el-table :data="placeTreeData" style="cursor: pointer;" height="100%" :show-header="false" @row-click="handleRowClick">
              <el-table-column property="name" label="名称">
                <template slot-scope="scope">{{ scope.row.name }}({{ scope.row.district }})</template>
              </el-table-column>
            </el-table>
          </div>
          <div id="map_canvas" class="allmap" />

        </div>
      </div>
    </model-dialog>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  props: {
    value: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      placeTreeData: [],
      dialogVisible: false,
      map: null,
      searchMarker: null,
      searchInfo: {
        latLng: '',
        address: ''
      },
      resultLatLng: null
    }
  },
  watch: {
    'searchInfo.position': function(val) {
      this.searchPlace()
    },
    value: function(val) {
      this.resultLatLng = val
    }
  },
  mounted() {
  },
  destroyed() {},
  methods: {
    showMap() {
      this.dialogVisible = true
      this.searchInfo = {
        latLng: this.resultLatLng,
        address: ''
      }
      this.placeTreeData = []
      this.$nextTick(function() {
        this.initMap()
      })
    },
    initMap() {
      AMapLoader.load({
        'key': '6f7d76d8bb50810b10c59c7d0165cb02',
        'version': '2.0',
        'plugins': ['AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.Geolocation', 'AMap.AutoComplete'],
        'AMapUI': {
          'version': '1.1',
          'plugins': []
        },
        'Loca': {
          'version': '2.0.0'
        }
      }).then((AMap) => {
        this.map = new AMap.Map('map_canvas', {
          rotateEnable: true,
          pitchEnable: true,
          zoom: 17,
          zooms: [2, 20]
        })
        this.map.addControl(new AMap.ToolBar())
        if (this.resultLatLng) {
          if (this.searchMarker) {
            this.searchMarker.setMap(null)
            this.searchMarker = null
          }
          // eslint-disable-next-line no-undef
          this.searchMarker = new AMap.Marker({
            position: [this.resultLatLng.split(',')[0], this.resultLatLng.split(',')[1]],
            // eslint-disable-next-line no-undef
            offset: new AMap.Pixel(-13, -30),
            icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            // 设置是否可拖拽
            draggable: true,
            cursor: 'move'
          })
          this.searchMarker.setMap(this.map)
          this.searchMarker.on('dragging', () => {
            this.searchInfo.latLng = this.searchMarker.getPosition().lng + ',' + this.searchMarker.getPosition().lat
          })
          this.map.setFitView()
        }
      }).catch(e => {
        throw (new Error('加载高德地图失败：' + e))
      })
    },
    // 搜索
    searchPlace() {
      if (!this.searchInfo.position) {
        return
      }
      var $this = this
      // eslint-disable-next-line no-undef
      var autoOptions = {
        city: '山东省'
      }
      // eslint-disable-next-line no-undef
      var autoComplete = new AMap.AutoComplete(autoOptions)
      autoComplete.search(this.searchInfo.position, function(status, result) {
        if (result === 'NO_PARAMS') {
          return
        }
        if (!result.info) {
          return
        }
        result = result.tips.filter((item) => {
          return item.location !== ''
        })
        result = result.filter((item) => {
          return item.location !== undefined
        })
        $this.placeTreeData = result
      })
    },
    handleRowClick(row) {
      this.searchInfo.position = row.name
      this.searchInfo.latLng = row.location.lng + ',' + row.location.lat
      if (this.searchMarker) {
        this.searchMarker.setMap(null)
        this.searchMarker = null
      }
      // eslint-disable-next-line no-undef
      this.searchMarker = new AMap.Marker({
        position: [row.location.lng, row.location.lat],
        // eslint-disable-next-line no-undef
        offset: new AMap.Pixel(-13, -30),
        icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        // 设置是否可拖拽
        draggable: true,
        cursor: 'move'
      })
      this.searchMarker.setMap(this.map)
      this.searchMarker.on('dragging', () => {
        this.searchInfo.latLng = this.searchMarker.getPosition().lng + ',' + this.searchMarker.getPosition().lat
      })
      this.map.setFitView()
    },
    handleConfirm() {
      this.dialogVisible = false
      this.resultLatLng = this.searchInfo.latLng
      this.$emit('input', this.resultLatLng)
    },
    showInfo() {
      // this.$emit('input', this.point.lng + ',' + this.point.lat)
      /* this.mapGeocoder.getLocation(this.point, function(rs) {
        var addComp = rs.addressComponents
        $this.searchInfo.address =
          addComp.province +
          addComp.city +
          addComp.district +
          addComp.street +
          addComp.streetNumber
        $this.$emit('addressInfo', $this.searchInfo)
      })*/
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.allmap {
  width: 100%;
  height: 500px;
  font-family: "微软雅黑";
}

.amap-marker:first-child .amap-icon img {
  width: 25px;
  height: 34px;
}
</style>
